<template>
    <div class="appointment settle-sub-box">
        <div class="history">
            <div class="list clearfix" v-for="(list,index) in applyList" :key="index">
                <div class="head">
                    <a class="phone" :href="'tel:'+list.userPhone">{{list.userPhone}}</a>
                    {{list.userName}}
                </div>
                <div class="cont">
                    <div class="clearfix">
                        <div class="label">就诊科室：</div>
                        <div class="value">{{list.dept + ' ' + list.doctorName}}</div>
                    </div>
                    <div class="clearfix">
                        <div class="label">就诊时间：</div>
                        <div class="value">{{list.appointmentDate + ' ' + list.dayStr + ' ' + list.visitTime}}</div>
                    </div>
                    <div class="clearfix">
                        <div class="label">取消时间：</div>
                        <div class="value">{{list.cancelTime}}</div>
                    </div>
                </div>
            </div>
            <infinite-loading @infinite="infiniteHandler" spinner="spiral" :distance="100">
                <div slot="no-more"></div>
                <!--                <div slot="no-more" class="noMore">没有更多记录了</div>-->
                <div slot="no-results"></div>
                <!--                <div slot="no-results" class="empty">暂无预约记录</div>-->
                <div slot="error" slot-scope="{ trigger }">
                    <!--                    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry-->
                </div>
            </infinite-loading>
        </div>
        <div class="empty" v-if="!applyList[0]">暂无取消预约记录</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                applyList: [],
                showConfirm: false,
                currentList: null,
                applyTimes: {},
                index: 1,
                NoMoreData: false,
                empty: '没有更多数据了'
            }
        },
        mounted() {
            // this.$emit('change', {
            //     style: {backgroundColor: '#f4f4f4'}
            // })
        },
        methods: {
            infiniteHandler($state) {
                this.$http.get('/cockpit/pageApplyCancelInfo', {
                    size: 10,
                    current: this.index || 1
                }).then(result => {
                    this.applyList.push(...result.data.records)
                    if (result.data.pages <= result.data.current) {
                        $state.loaded()
                        $state.complete()
                    } else {
                        this.index += 1
                        $state.loaded()
                    }
                }).catch(() => {
                    $state.error()
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .appointment {
        /*background-color: #f4f4f4;*/
        padding: .3rem;

        .history {
            .list {
                background-color: #fff;
                margin-bottom: .2rem;
                padding: 0 .2rem;
                border-radius: .05rem;
                box-shadow: 0 0 5px 0 rgba(210, 210, 210, .5);

                > div {
                    padding: 0 .3rem;
                    border-bottom: 1px solid #f5f5f5;

                    &:last-child {
                        border: 0 none;
                    }

                    .label {
                        float: left;
                        width: 1.45rem;
                        color: #999;
                    }

                    .value {
                        margin-left: 1.45rem;
                    }
                }

                .head {
                    line-height: .8rem;
                    font-size: .3rem;
                    font-weight: bolder;

                    .phone {
                        float: right;
                        color: #5586FB;
                        font-size: .28rem;
                        font-weight: normal;
                    }
                }

                .cont {
                    padding-top: .15rem;
                    padding-bottom: .15rem;
                    line-height: .5rem;
                    /*color: #151515;*/
                }

                .foot {
                    line-height: .8rem;

                    .button {
                        float: right;
                        background-color: #f4f4f4;
                        border: 1px solid #ddd;
                        padding: 0 .2rem;
                        font-size: .24rem;
                        line-height: .5rem;
                        height: .5rem;
                        margin-top: .15rem;
                        border-radius: .3rem;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .empty {
            text-align: center;
            padding-top: .5rem;
            color: #999;
        }

        .noMore {
            text-align: center;
            margin: .3rem 0;
            color: #999;
        }
    }
</style>
